<template>
  <!-- 申请预售订单延期关闭 -->
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogVisible2"
    width="600px">
    <el-form :model="form" size="mini" label-width="130px" :rules="rules" ref="form">
      <el-form-item label="合同号：">
        <span>{{ info.orderSn }}</span>
      </el-form-item>
      <el-form-item label="客户名称：">
        <span>{{ info.customerName }}</span>
      </el-form-item>
      <el-form-item label="合同数量：">
        <span>{{ info.orderGoodsNumber }}</span>
      </el-form-item>
      <el-form-item label="合同金额：">
        <span>{{ info.orderAmount }}</span>
      </el-form-item>
      <el-form-item label="结算方式：">
        <div>{{ info.transactionType|fifPayTypes }}</div>
        <div>{{ info.orderRemark }}</div>
      </el-form-item>
      <el-form-item label="预计发货完成时间：">
        <span>{{info.endSendDate}}</span>
      </el-form-item>
      <el-form-item label="预计关闭时间：">
        <span>{{info.aboutCloseTime}}</span>
      </el-form-item>
      <div>
        <el-form-item label="延期天数：" prop="delayDaysNum">
          <el-input v-model="form.delayDaysNum" clearable type="number" style="width:100px;"></el-input><span style="padding-left:5px">天</span>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input style="width:90%;" v-model="form.remark" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose2">取 消</el-button>
      <el-button type="primary"  @click="handleConfirm2" :loading="btnLoading2">确认申请</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { delaySendApply } from '@/api/order.js';
import { mapGetters } from 'vuex';
const defaultForm = {
  orderId: "",  //订单id
  delayDaysNum:'',
  remark:'',
};
export default {
  name: "delayClosure",
  data() {
    return {
      dialogVisible2: false,
      btnLoading2: false,
      form: JSON.parse(JSON.stringify(defaultForm)),
      title: '',
      info: {},
      rules: {
        delayDaysNum: [
          { required: true, message: '此项必填', trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components: {
  },
  created() {
  },
  filters: {
    fifPayTypes(val) {
      if (val == 'BANK_PAY') {
        return '款到发货'
      } else if (val == 'COD_PAY') {
        return '货到付款'
      } else if (val == 'COD_PAY2') {
        return '货到票到付款'
      } else if (val == 'HONOUR_PAY') {
        return '承兑结算'
      } else if (val == 'XISHANG_PAY') {
        return '摩塑白条'
      } else {
        return val
      }
    },
  },
  methods: {
    //显示
    showPop(item) {
      this.dialogVisible2 = true;
      this.info = item;
      this.title = '申请预售订单延期关闭'
      this.form = JSON.parse(JSON.stringify(defaultForm));
      this.form.orderId = item.orderId
    },

    //关闭弹窗
    handleClose2() {
      this.dialogVisible2 = false;
      this.btnLoading2 = false;
    },

    //提交
    handleConfirm2() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading2 = true;
          let data = JSON.parse(JSON.stringify(this.form));
          delaySendApply(data).then((res) => {
            this.btnLoading2 = false;
            this.handleClose2();
            this.$emit('upload');
          }).catch(() => {
            this.btnLoading2 = false;
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
